<template>
    <div class="fluid">
        <div class="container">
            <div style="width:46%;">
                <p class="parpOne"><span style="font-weight:600">百度搜索</span><img src="../../../assets/img/2-indexMedia/media/3.png" alt=""></p>
                <p class="parpTwo">全系列多场景用户顶级流量</p>
                <p class="parpThree">百度推广凭借强大的用户产品优势，每天数十亿次搜索请求，超过一亿用户浏览百度信息流，800亿次定位服务请求，为客户提供全系列产品广告资源，覆盖用户生活十大场景。</p>
            </div>
            <dl class="parpFour">
                <dd><img src="../../../assets/img/2-indexMedia/SEM/百度/2.png" alt=""><p>百度APP</p>
                </dd>
                <dd><img src="../../../assets/img/2-indexMedia/SEM/百度/3.png" alt=""><p>百度知道</p>
                </dd>
                <dd><img src="../../../assets/img/2-indexMedia/SEM/百度/4.png" alt=""><p>百度网盘</p>
                </dd>
                <dd><img src="../../../assets/img/2-indexMedia/SEM/百度/5.png" alt=""><p>百度地图</p>
                </dd>
                <dd><img src="../../../assets/img/2-indexMedia/SEM/百度/6.png" alt=""><p>百度百科</p>
                </dd>
                <dd><img src="../../../assets/img/2-indexMedia/SEM/百度/7.png" alt=""><p>百度糯米</p>
                </dd>
                <dd><img src="../../../assets/img/2-indexMedia/SEM/百度/8.png" alt=""><p>爱奇艺视频</p>
                </dd>
                <dd><img src="../../../assets/img/2-indexMedia/SEM/百度/9.png" alt=""><p>百度浏览器</p>
                </dd>
            </dl>
            <div>
                <button v-for="(item,index) in list" :key="index" @mouseover="toggle(index)" class="btnAll" :class="{backgWhite:liIndex!=index,backgRed:liIndex==index}" @click="route(index)">
                    <img :src="item[0]">
                    <span :class="{sizewhite:liIndex==index,sizeblack:liIndex!=index}">{{item[1]}}</span>
                </button>
            </div>
            <img src="../../../assets/img/2-indexMedia/SEM/百度/1.png" alt="">
        </div>
	</div>
</template>
<script>
require("../../../assets/css/buttonCommon.css");
const img1 = require("../../../assets/img/2-indexMedia/dsp/2.png");
const img2 = require("../../../assets/img/2-indexMedia/dsp/4.png");
const img3 = require("../../../assets/img/2-indexMedia/dsp/3.png");
const img4 = require("../../../assets/img/2-indexMedia/dsp/5.png");
export default {
  data() {
    return {
      list: [[img1, "联系客服", img3], [img2, "查看详情", img4]],
      liIndex: 1
    };
  },
  created() {
    this.toggle(1);
  },
  methods: {
    toggle(index) {
      this.liIndex = index;
      this.list[0][0] = img1;
      this.list[1][0] = img2;
      this.list[index].splice(0, 1, this.list[index][2]);
    },
    route(index) {
      if (index == 1) {
        this.$router.push({
          path: "/view2/SEMSale",
          query: { type: "SEM", id: 2 }
        });
      } else if (index == 0) {
        this.connectQQ();
      }
    }
  }
};
</script>
<style scoped>
.fluid {
  text-align: left;
}
.container {
  padding-top: 70px;
  padding-left: 40px;
  width: 100%;
  height: 520px;
  position: relative;
}
.container > div:nth-child(3) {
  margin-top: 40px;
}
.container > div:nth-child(3) > button:nth-child(2) {
  margin-left: 30px;
}
.container > img {
  position: absolute;
  top: 60px;
  right: 70px;
}
.parpOne {
  font-size: 36px;
  font-family: PingPang SC;
  color: rgb(34, 34, 34);
}
.parpOne > img {
  margin-left: 10px;
}
.parpTwo {
  margin-top: 60px;
  font-size: 18px;
  color: rgb(34, 34, 34);
}
.parpThree {
  margin-top: 20px;
  font-size: 14px;
  color: rgb(34, 34, 34);
}
.parpFour {
  margin-top: 40px;
  margin-left: -10px;
  overflow: hidden;
}
.parpFour dd {
  float: left;
  margin-left: 10px;
}
.parpFour dd p {
  margin-top: 10px;
  font-size: 13px;
  color: rgb(34, 34, 34);
}
.hoverBtnOne > span,
.hoverBtnTwo > span {
  margin-left: 5px;
}
</style>


